<template>
    <div class="nav_main">
        <!-- 导航栏左边 -->
        <div class="nav_left">
            <ul>
                <!-- 主站 -->
                <li class="nav_left_item" @click="returnHome">
                    <a href="#/home">
                        <i class="iconfont icon-bilibili home_logo"></i>
                    </a>
                </li>
                <li class="nav_left_item">番剧</li>

                <!-- 游戏中心 -->
                <li class="nav_left_item">
                     <el-popover placement="bottom-start" trigger="hover">
                        <div class="nav-game">
                            <div class="n-g-left">
                                <div class="n-g-img">
                                    <img src="../../assets/img/game1.png" alt="">
                                </div>
                                <div class="n-g-recommend">
                                    <span class="recommend-item">
                                        <img src="../../assets/img/game2.png" alt="">
                                    </span>
                                    <span class="recommend-item">
                                        <img src="../../assets/img/game3.png" alt="">
                                    </span>
                                    <span class="recommend-item">
                                        <img src="../../assets/img/game4.png" alt="">
                                    </span>
                                </div>
                            </div>
                            <el-divider direction="vertical"></el-divider>
                            <div class="n-g-right">
                                <ul>
                                    <li class="n-g-title">苍之骑士团2</li>
                                    <li class="n-g-title">无边存在</li>
                                    <li class="n-g-title">幻塔</li>
                                    <li class="n-g-title">动物朋友：国王</li>
                                    <li class="n-g-title">绝对演绎</li>
                                    <li class="n-g-title">代号：依露希尔</li>
                                </ul>
                            </div>
                        </div>
                        <a slot="reference">游戏中心</a>
                     </el-popover>
                </li>

                <!-- 直播 -->
                <li class="nav_left_item">
                     <el-popover placement="bottom-start" trigger="hover">
                        <div class="nav-zhibo">
                            <!-- 左边 -->
                            <div class="n-z-left">
                                <div class="n-z-l-title">热门直播：</div>
                                <div class="n-z-l-main">
                                    <span class="n-z-l-item">
                                        <img src="../../assets/img/zhubo1.png">
                                        <p>是管管呦</p>
                                    </span>
                                    <span class="n-z-l-item">
                                        <img src="../../assets/img/zhubo2.png">
                                        <p>一只肥吨吨</p>
                                    </span>
                                    <span class="n-z-l-item">
                                        <img src="../../assets/img/zhubo3.png">
                                        <p>邻家小妹</p>
                                    </span>
                                    <span class="n-z-l-item">
                                        <img src="../../assets/img/zhubo4.png">
                                        <p>小蔡在东京</p>
                                    </span>
                                    <span class="n-z-l-item">
                                        <img src="../../assets/img/zhubo5.png">
                                        <p>鱼多多</p>
                                    </span>
                                    <span class="n-z-l-item">
                                        <img src="../../assets/img/zhubo6.png">
                                        <p>秋咪啊</p>
                                    </span>
                                </div>
                            </div>   
                            <el-divider class="hot-divider" direction="veritical"></el-divider>
                            <!-- 右边 -->
                            <div class="n-g-right">
                                 <div class="n-z-r-title">热门活动：</div>
                                 <img src="../../assets/img/hot.jpg" alt="">
                                 <img src="../../assets/img/hot2.png" alt="">
                            </div>
                        </div>
                        <a slot="reference">直播</a>
                    </el-popover>
                </li>

                <li class="nav_left_item">会员购</li>

                <!-- 漫画 -->
                <li class="nav_left_item" >
                     <el-popover placement="bottom-start" trigger="hover">
                        <div class="nav-cartoon">
                            <div class="n-c-left">
                                <div class="n-g-recommend">
                                    <span class="recommend-item">
                                        <img src="../../assets/img/game2.png" alt="">
                                    </span>
                                    <span class="recommend-item">
                                        <img src="../../assets/img/game3.png" alt="">
                                    </span>
                                    <span class="recommend-item">
                                        <img src="../../assets/img/game4.png" alt="">
                                    </span>
                                    <span class="recommend-item">
                                        <img src="../../assets/img/game4.png" alt="">
                                    </span>
                                </div>
                            </div>
                            <el-divider direction="vertical"></el-divider>
                            <div class="n-c-right">
                                <div class="n-c-r-title">人气漫画</div>
                                <ul>
                                    <li class="n-c-title">碧蓝之海</li>
                                    <li class="n-c-title">一拳超人</li>
                                    <li class="n-c-title">入间同学入魔了</li>
                                    <li class="n-c-title">装备我最强</li>
                                    <li class="n-c-title">地缚少年花子君</li>
                                    <li class="n-c-title">幽冥诡匠</li>
                                </ul>
                            </div>
                        </div>
                        <a slot="reference">漫画</a>
                     </el-popover>
                </li>

                <li class="nav_left_item">赛事</li>

                <!-- 下载app -->
                <li class="nav_left_item">
                     <el-popover placement="bottom-start" trigger="hover">
                        <div class="nav-app">
                            <img src="../../assets/img/saoma.png" alt="">
                        </div>
                        <a slot="reference">
                            <i class="iconfont icon-shouji app_logo"></i>
                            下载App
                        </a>
                    </el-popover>
                </li>
            </ul>
        </div>

        <!-- 导航栏中间 -->
        <div class="nav_center">
            <div 
            class="nav_center_search"
            v-if="searchExist"
            ref="NavSearch"
            >
                <!-- 自动输入框 -->
                <el-autocomplete 
                class="search_inp"
                popper-class="my-autocomplete"
                v-model="searchData"
                placeholder="searchDefaults"
                :fetch-suggestions="querySearch"
                @select="handleSelect"
                @keyup.enter.native="searchConfrim"
                clearable
                >
                    <div class="hot_search">
                        <span class="hot_pos">{{}}</span>
                        <span class="hot_keyword"></span>
                        <span class="hot_icon">
                            <img src="" alt="">
                        </span>
                    </div>
                </el-autocomplete>
                <el-button 
                class="search_btn" 
                type="info"
                @click="searchConfrim">
                    <i class="iconfont icon-sousuo search_logo"></i>
                </el-button>
            </div>
        </div>

        <!-- 导航栏右边 -->
        <div class="nav_right">
            <ul>
                <!-- 头像 -->
                <li class="nav_right_item">
                     <el-avatar 
                     size="medium" 
                     src="https://i0.hdslb.com/bfs/face/de996ae64756c60a222e165adf9c28806293459b.jpg@160w_160h_1c_1s.webp">
                     </el-avatar>
                </li>
                <!-- 开通大会员 -->
                <li class="nav_right_item">
                     <el-popover placement="buttom-start" trigger="hover">
                         <div class="bigmember">
                             <div class="bigmember-title">精彩推荐</div>
                             <div class="bigmember-img">
                                 <img src="../../assets/img/bighuiyuan.png" alt="">
                             </div>
                             <p>大会员可畅享各种专属内容，还有游戏礼包、个性装扮等你来拿~</p>
                             <div class="bigmember-btn">
                                  <el-button type="primary" size="small">开通大会员</el-button>
                             </div>
                         </div>
                         <a slot="reference">大会员</a>
                    </el-popover>
                </li>
                <!-- 消息 -->
                <li class="nav_right_item">
                    <el-badge :value="25" class="item">
                         <el-popover placement="buttom-start" trigger="hover">
                            <div class="message">
                                <ul>
                                    <li class="message-item">
                                        <span>回复我的</span>
                                        <el-badge :value="2" class="item message-item-spot">
                                            <span>&nbsp;&nbsp;</span>
                                        </el-badge>
                                    </li>
                                    <li class="message-item">
                                        <span>@我的</span>
                                    </li>
                                    <li class="message-item">
                                        <span>收到的赞</span>
                                    </li>
                                    <li class="message-item">
                                        <span>系统消息</span>
                                    </li>
                                    <li class="message-item">
                                        <span>我的消息</span>
                                        <el-badge :value="23" class="item message-item-spot">
                                            <span>&nbsp;&nbsp;</span>
                                        </el-badge>
                                    </li>
                                </ul>
                            </div>
                            <a slot="reference">消息</a>
                        </el-popover>
                    </el-badge>
                </li>
                <!-- 动态 -->
                <li class="nav_right_item">
                    <el-badge :value="100" :max="99" class="item">
                       <el-popover 
                        placement="buttom-start" 
                        title="标题"
                        width="200"
                        trigger="hover"
                        content="视频动态 直播 专栏">
                           <a slot="reference">动态</a>
                        </el-popover>
                    </el-badge>
                </li>
                <!-- 收藏 -->
                <li class="nav_right_item">
                    <el-popover 
                    placement="buttom-start" 
                    title="标题"
                    width="200"
                    trigger="hover"
                    content="视频动态 直播 专栏">
                        <a slot="reference">收藏</a>
                    </el-popover>
                </li>
                <!-- 历史 -->
                <li class="nav_right_item">
                    <el-popover 
                    placement="buttom-start" 
                    title="标题"
                    width="200"
                    trigger="hover"
                    content="视频动态 直播 专栏">
                        <a slot="reference">动态</a>
                    </el-popover>
                </li>
                <!-- 创作中心 -->
                <li class="nav_right_item">创作中心</li>
                <!-- 投稿 -->
                <li class="nav_right_item">
                    <el-button type="danger">投稿</el-button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'NavBar',
        props:{
            hotsearch: {
                type:Array,
                default(){
                    return [];
                },
            },
        },
        data() {
            return {
                // 判断搜索框是否需要存在
                searchExist:true,
                // 搜索框的隐藏与显示
                searchVisible:true,
                searchInput:'',
                // 屏幕宽度
                screenWidth: document.body.clientWidth,
                // 热搜数据
                hotData:this.hotsearch,
                // 搜入框数据
                searchData:'',
                // 默认搜索词
                searchDefaults:'请输入你想搜索的内容',
            }
        },
        created() {
            // 创建时判断搜索区域是否显示
            if(this.screenWidth < 1200){
                this.searchVisible = false;
            }
            if(this.$router.path === './search'){
                this.searchVisible = false;
            }
        },
        mounted() {
            const that = this;
            // 挂载onresize方法，监听页面窗口的变化
            window.onresize = () => {
                return (() => {
                    that.screenWidth = document.body.clientWidth;
                })();
            }
        },
        watch:{
            // 为避免频繁调用resize函数，使用定时器
            screenWidth(val){
                if(!this.timer){
                    this.screenWidth = val;
                    this.timer = true;
                    const that = this;
                    setTimeout(function() {
                        if(that.screenWidth <= 1200){
                            this.searchVisible = false;
                        }else{
                            this.searchVisible = true;
                        }
                        that.timer = false;
                    }, 400);
                }
            },
            // 监听热搜的数据  实时更新data的值
            hotsearch(val){
                this.hotData = val;
            }
        },
        methods: {
            // 返回首页
            returnHome(){
                if(this.$router.path === "/home"){
                    return;
                }
                // pushAPI等价于:to="",即跳转页面
                this.$router.push("/home");
            },
            // 输入框获取焦点时调用的方法
            querySearch(){
                // let reults = this.hotData;

            },
            // 判断选择了哪个热搜
            handleSelect(item){
                if(item.icon === ''){
                    return false;
                }
                return item.icon;
            },
            // 确认搜索
            searchConfrim(){
                if(this.searchData === ""){
                    this.searchData = this.searchDefaults;
                }
                // 跳转页面(未写)
                this.routerJump();
            },
            // 路由跳转
            routerJump(){
                this.$router.push(`/search?keyword=${this.searchData}`);
            }
        },
    }
</script>

<style scoped>
    *{
        color: #fff;
    }
    .navbar_main {
        display: flex;
        height: 56px;
        align-items: center;
    }
    /* nav左边部分 */
    .nav_left {
        width: 434px;
        height: 100%;
    }
    .nav_left ul {
        display: flex;
        padding: 0px;
        margin-top: 16px;
        justify-content: space-around;
    }
    .nav_left_item {
        cursor: pointer;
        /* 规定要显示的光标 */
        font-size: 14px;
        color: #fff;
    }

    .home_logo {
        color: #fff;
    }
    .app_logo {
        font-size: 14px;
    }

    /* nav游戏 */
    .nav-game {
        display: flex;
        justify-content: space-between;
        /* 项目位于各行之间留有空白的容器内。 */
        width: 350px;
    }
    /* nav游戏盒子左边 */
    .n-g-left {
        width: 60%;
    }
    .n-g-img {
        width: 100%;
        border-radius: 5px;
        overflow: hidden;
        background: pink;
        padding: 0;
    }
    .n-g-img img {
        display: block;
        width: 100%;
    }
    .n-g-recommend {
        width: 100%;
        display: flex;
    }
    .recommend-item {
        flex:1;
        margin-top: 10px;
        border-radius: 10px;
        overflow: hidden;
    }
    .recommend-item:nth-child(2) {
        margin: 10px 15px 0;
    }
    .recommend-item img {
        display: block;
        width: 100%;
    }

    /* 下划线 */
    .el-divider {
        height: 180px;
    }
    /* 游戏盒子的右边 */
    .n-g-right {
        width: 30%;
    }
    .n-g-title{
        display: block;
        color: #555;
        font-size: 12px;
        line-height: 30px;
    }

    /* nav直播 */
    .nav-zhibo {
        width: 400px;
        display: flex;
        justify-content: space-between;
    }
    .n-z-left {
        width: 55%;
    }
    .n-z-title{
        font-size:16px;
        color: #ec81a7;
    }
    .n-z-l-main{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .n-z-l-item {
        display: inline-block;
        width: 28%;
        margin-top: 10px;
    }
    .n-z-l-item img {
        width: 100%;
        border-radius: 50%;
    }
    .n-z-l-item p {
        color: #555;
        font-size:12px;
        /* 一行显示 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
    .hot-divider{
        height: 208px;
    }
    .n-z-right {
        width: 40%;
    }
    .n-z-right img{
        width: 100%;
        margin-top: 20px;
    }
    /* nav扫码 */
    .nav-app{
        width: 200px;
    }
    .nav-app img{
        width: 100%;
    }

    /* nav中间部分 */
    .nav_center{
        flex: 1;
        margin: 0 30px;
    }
    .nav_center_search{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 2vw;
    }
    .search_inp {
        flex: 1;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    /* 默认热搜填充 */
    .hot_pos {
        display: inline-block;
        width: 24px;
        height: 24px;
        text-align: center;
        font-size: 12px;
        color: #555;
    }
    /* 热搜关键词 */
    .hot_keyword {
        display: inline-block;
        font-size: 12px;
        color:#555;
        margin: 0 8px;
    }

    .hot_icon {
        display: inline-block;
        width: 14px;
        height: 14px;
    }
    .hot_icon img {
        width: 100%;
        height: 100%;
    }
    .search_btn {
        width: 48px;
        height: 40px;
        margin: 0;
        padding: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
    .search_logo {
        font-size: 24px;
        font-weight: 600;
        color: #2999d9;
    }

    /* nav右边 */
    .nav_right{
        height: 100%;
        width: 454px;
    }
    .nav_right ul {
        display: flex;
        margin: 0;
        margin-top: 8px;
        padding: 0px;
        justify-content: space-around;
        align-items: center;
    }
 
    .nav_right_item {
        cursor: pointer;
        font-size: 14px;
        color: #fff;
    }

    /* 大会员弹出框内容 */
    .bigmember {
        width: 200px;
        font-size: 12px;
    }
    .bigmember-title {
        color: #555;
        font-weight: 600;
    }
    .bigmember-img {
        margin-top: 10px;
    }
    .bigmember-img img {
        width: 100%;
    }
    .bigmember p {
        color: #555;
        margin: 10px 0;
    }
    .bigmember-btn {
        text-align: center;
    }

    /* 消息弹出框 */
    .message {
        width: 100px;
    }
    .message-item {
        cursor: pointer;
        display: block;   
        margin-bottom: 10px;
        padding-left: 8px;
    }
    .message-item span {
        color: #555;
        font-size: 13px;
    }
    .message-item-spot {
        float: right;
    }

</style>